<template>
    <div class="app-container">
      <div class="filter-container">
        <el-form>
          <el-form-item>
            <el-button type="danger" icon="el-icon-add" @click="showCreate" v-if="hasPerm('menu:add')">添加
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="5">
          <p style="color: #989A9A;">系统菜单名</p>
          <el-input placeholder="输入菜单名" v-model="searchParam.menuName" @keyup.enter.native="getList('search')"></el-input>
        </el-col>

        <el-col :span="4">
          <p>&nbsp;</p>
          <el-button type="danger" @click="getList('search')">搜索</el-button>
        </el-col>

      </el-row>
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
                highlight-current-row>
        <el-table-column align="center" label="序号" min-width="10%">
          <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"> </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="id" label="菜单ID" min-width="10%" sortable></el-table-column>
        <el-table-column align="center" prop="menuName" label="菜单名" min-width="20%" sortable></el-table-column>
        <el-table-column align="center" prop="menuCode" label="菜单代码" min-width="20%" sortable></el-table-column>
        <el-table-column align="center" label="管理" min-width="15%" v-if="hasPerm('menu:edit')">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-edit" @click="showUpdate(scope.$index)" size="small">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="totalCount"
        layout="prev, pager, next">
      </el-pagination>
      <el-dialog title="确认删除？" :visible.sync="deleteDialogShow">
        <div slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogShow = false">取 消</el-button>
          <el-button type="danger" @click="confirmDelete">确 认</el-button>
        </div>
      </el-dialog>
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form v-if="dialogStatus=='update'" class="small-space" :model="tempArticle" label-position="left" label-width="70px"
                style='width: 300px; margin-left:50px;'>
          <el-form-item label="菜单名">
            <el-input type="text" v-model="tempArticle.menuName">
            </el-input>
          </el-form-item>
          <el-form-item label="菜单代码">
            <el-input type="text" v-model="tempArticle.menuCode">
            </el-input>
          </el-form-item>
          
        </el-form>
        <el-form v-else class="small-space" :model="tempArticle" label-position="left" label-width="70px"
                style='width: 300px; margin-left:50px;'>
          <el-form-item label="菜单名">
            <el-input type="text" v-model="tempArticle.menuName" placeholder="格式: 订单管理、用户管理...">
            </el-input>
          </el-form-item>
          <el-form-item label="菜单代码">
            <el-input type="text" v-model="tempArticle.menuCode" placeholder="格式: order、user、dishes...">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCancel">取 消</el-button>
          <el-button v-if="dialogStatus==='create'" type="danger" @click="createArticle">创 建</el-button>
          <el-button type="danger" v-else @click="updateArticle">修 改</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
      return {
        totalCount: 0, //分页组件--数据总条数
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        listQuery: {
          pageNum: 1,//页码
          pageSize: 15,//每页条数
        },
        searchParam: {
          menuName: ''
        },
        dialogStatus: 'create',
        dialogFormVisible: false,
        textMap: {
          update: '编辑',
          create: '添加菜单'
        },
        tempArticle: {},
        deleteDialogShow: false
      }
    },
    created() {
      this.getList()
    },
    methods: {
      
      dialogCancel() {
        this.dialogFormVisible = false
        this.tempArticle = {}
      },
      async getList(search) {
        //查询列表
        if (!this.hasPerm('menu:list')) {
          return
        }
        this.listLoading = true
        const res = (search && search === 'search') ? 
          await this.$api.sysmenu.search(this.listQuery.pageSize, this.listQuery.pageNum, this.searchParam)
          : await this.$api.sysmenu.list(this.listQuery.pageSize, this.listQuery.pageNum, true)
        this.listLoading = false
        this.list = res.data.data
        this.totalCount = res.data.total
      },
      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageSize = val
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList()
      },
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageSize + $index + 1
      },
      showCreate() {
        //显示新增对话框
        this.tempArticle = {}
        this.tempArticle.type = 0
        this.dialogStatus = "create"
        this.dialogFormVisible = true
      },
      showUpdate($index) {
        this.tempArticle = JSON.parse(JSON.stringify(this.list[$index]))
        this.dialogStatus = "update"
        this.dialogFormVisible = true
      },
      handleDelete($index) {
        let _vue = this;
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确认',
          showCancelButton: false,
          type: 'warning'
        }).then(async () => {
          let dishes = _vue.list[$index]
          await _vue.$api.sysmenu.delete(dishes.id)
          _vue.$message.success('删除成功')
          _vue.getList()
        })
      },
      async createArticle() {
        await this.$api.sysmenu.add(this.tempArticle)
        this.getList()
        this.dialogFormVisible = false
      },
      async updateArticle() {
        await this.$api.sysmenu.edit(this.tempArticle)
        this.getList()
        this.dialogFormVisible = false
      },
    }
}
</script>

<style>

</style>
